<!--updated at 2022/04/09-->
<template>
  <div class="zui-placeholder">
    <div class="content-wrap">
      <i v-if="type == 'empty'" class="icon iconfont-zui icon-zui-empty"></i>
      <i v-else-if="type == 'network-error'" class="icon iconfont-zui icon-zui-network-error"></i>
      <h5 class="title">{{ computedTitle }}</h5>
      <zui-button v-if="showButton" class="button" round size="small" type="primary" @click="onBtnTap">
        {{ computedButtonText }}
      </zui-button>
    </div>
  </div>
</template>

<script>
// 载入此组件时就加载图片，避免后期网络错误时才加载图片导致的图片无法显示问题！
const types = { EMPTY: 'empty', NETWORK_ERROR: 'network-error' }
export default {
  emits: ['buttonClick'],
  components: {},
  props: {
    // 状态 empty空，network-error网络异常
    type: {
      type: String,
      default: types.EMPTY
    },
    title: String,
    showButton: Boolean,
    buttonText: String
  },
  data() {
    return {}
  },
  computed: {
    computedButtonText() {
      if (this.buttonText) {
        return this.buttonText
      }
      if (this.type == types.EMPTY) {
        return '添加'
      }

      if (this.type == types.NETWORK_ERROR) {
        return '重新加载'
      }
    },
    computedTitle() {
      if (this.title) {
        return this.title
      } else {
        if (this.type == types.EMPTY) {
          return '暂无内容'
        } else if (this.type == types.NETWORK_ERROR) {
          return '网络错误请重试'
        }
      }
      return '空'
    }
  },
  methods: {
    onBtnTap() {
      this.$emit('buttonClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.zui-placeholder {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-10%);
    .icon {
      font-size: 48px;
      line-height: 1em;
      color: var(--zui-color-primary);
    }
    .title {
      color: var(--zui-color-text-placeholder);
      margin-top: 8px;
      line-height: 1em;
      font-size: var(--zui-size-text-small);
    }
    .button {
      margin-top: 24px;
      padding: 0 16px;
    }
  }
}
</style>
